<template>
  <div class="app-container">
      <el-form :model="form" label-width="auto" style="max-width: 600px">
        <el-form-item label="文件夹">
          <el-input v-model="form.folder" />
        </el-form-item>
        <el-form-item label="表名">
          <el-input v-model="form.text" />
        </el-form-item>
        <el-form-item label="大驼峰">
          <el-input v-model="form.da" />
        </el-form-item>
        <el-form-item label="小驼峰">
          <el-input v-model="form.xiao" />
        </el-form-item>
        <el-form-item label="Sql">
          <el-input v-model="form.sql" type="textarea" :rows="15" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmitApp" >前端生成</el-button>
          <el-button type="primary" @click="onSubmit" >生成</el-button>
          <el-button>Cancel</el-button>
        </el-form-item>
      </el-form>
  </div>
</template>

<script setup name="Gen">
  // 方法
  const instance = getCurrentInstance();
  const { proxy } = instance || {};
  const { face_type } = proxy.useDict("face_type")

  import methods from '@/utils/methods.js'
  import controller from './js/controller.js'
  import dto from './js/dto.js'
  import entity from './js/entity.js'
  import service from './js/service.js'
  import webHtml from './js/web.js'
  import formHtml from './js/form.js'
  import api from './js/api.js'

  import JSZip from 'jszip';
  import { saveAs } from 'file-saver';

  import { ref } from 'vue'

  // do not use same name with ref
  const form = ref({
    sql: ``,
    da: '',
    xiao: '',
    text: '',
    folder: 'jx3',
  })

  const onSubmit = () => {
    let controllerTs = controller(form.value)
    let obj = methods.parseCreateTableSql(form.value.sql)
    let dtoTs = dto(obj.sub, form.value)
    let entityTs = entity({
      ...obj,
      ...form.value
    })
    let serviceTs = service({
      ...obj,
      ...form.value
    })

    try {
      // 创建压缩包实例
      const zip = new JSZip();

      // 将字符串添加为JS文件到压缩包
      zip.file(form.value.xiao+'.controller.ts', controllerTs);
      zip.file(form.value.xiao+'.dto.ts', dtoTs);
      zip.file(form.value.xiao+'.entity.ts', entityTs);
      zip.file(form.value.xiao+'.service.ts', serviceTs);

      // 生成压缩包并下载
      zip.generateAsync({ type: 'blob' })
          .then((content) => {
            // 使用FileSaver保存文件
            saveAs(content, '后端代码.zip');
            proxy.$modal.msgSuccess('生成成功');
          })
          .catch((error) => {
            console.error('生成压缩包失败:', error);
          });
    } catch (error) {
      console.error('操作失败:', error);
    }
  }
  const onSubmitApp = () => {
    let obj = methods.parseCreateTableSql(form.value.sql)
    let webHtmlJs = webHtml({
      ...obj,
      ...form.value
    })

    let formHtmlJs = formHtml({
      ...obj,
      ...form.value
    })

    let apiJs = api(form.value)

    try {
      // 创建压缩包实例
      const zip = new JSZip();

      // 将字符串添加为JS文件到压缩包
      zip.file('index.vue', webHtmlJs);
      zip.file('form.vue', formHtmlJs);
      zip.file(form.value.xiao+'.js', apiJs);

      // 生成压缩包并下载
      zip.generateAsync({ type: 'blob' })
          .then((content) => {
            // 使用FileSaver保存文件
            saveAs(content, '前端代码.zip');
            proxy.$modal.msgSuccess('生成成功');
          })
          .catch((error) => {
            console.error('生成压缩包失败:', error);
          });
    } catch (error) {
      console.error('操作失败:', error);
    }

  }
</script>
